<template>
  <div id="app">
    <header>
      <h1>My Vue App</h1>
      <!-- 这里可以放置顶部导航栏 -->
      <nav>
        <ul>
          <li><router-link to="/">Home</router-link></li>
          <li><router-link to="/about">About</router-link></li>
          <li><router-link to="/about/team">Team</router-link></li>
        </ul>
      </nav>
    </header>

    <!-- 面包屑组件 -->
    <Breadcrumb />

    <main>
      <!-- 显示路由匹配的页面组件 -->
      <router-view />
    </main>

    <footer>
      <p>© 2024 My Vue App</p>
    </footer>
  </div>
</template>

<script setup lang="ts">
import Breadcrumb from './components/Breadcrumb.vue'
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
}

header {
  background-color: #42b983;
  padding: 10px;
  color: white;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 15px;
}

nav li {
  font-size: 16px;
}

main {
  margin: 20px;
}

footer {
  margin-top: 20px;
  font-size: 14px;
  color: #777;
}
</style>
